<template>
  <div id="app">
    <v-app id="inspire">
        <v-navigation-drawer
                v-model="drawer"
                :clipped="$vuetify.breakpoint.lgAndUp"
                app
        >
          <v-list
                  dense
          >
            <template v-for="item in menu">
              <v-list-group
                      v-if="item.children"
                      :key="item.id"
                      :prepend-icon="'mdi-chevron-down'"
                      append-icon=""
                      height="60"
              >
                <template v-slot:activator>
                  <v-list-item-content >
                    <v-list-item-title >
                      {{ item.authName }}
                    </v-list-item-title>
                  </v-list-item-content>
                </template>
                <v-list-item
                        v-for="(child, i) in item.children"
                        :key="child.id"
                        link
                        :to="child.path"
                >
                  <v-list-item-action v-if="child.icon">
                    <v-icon>{{ child.icon }}</v-icon>
                  </v-list-item-action>
                  <v-list-item-content>
                    <v-list-item-title >
                      {{ child.authName }}
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
              </v-list-group>
              <v-list-item
                      v-else
                      :key="item.authName"
                      link
              >
                <v-list-item-action>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>
                    {{ item.authName }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </template>
          </v-list>
        </v-navigation-drawer>
<!--        导航栏-->
        <v-app-bar
                :clipped-left="$vuetify.breakpoint.lgAndUp"
                app
                color="blue darken-3"
                dark
        >
          <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
          <v-toolbar-title
                  style="width: 300px"
                  class="ml-0 pl-4"
          >
            <span >万源疫情可视分析系统</span>
          </v-toolbar-title>

<!--          <v-text-field-->
<!--                  flat-->
<!--                  solo-inverted-->
<!--                  hide-details-->
<!--                  prepend-inner-icon="mdi-magnify"-->
<!--                  label="Search"-->
<!--                  class="hidden-sm-and-down"-->
<!--          ></v-text-field>-->


          <v-spacer></v-spacer>
          <v-btn icon>
            <v-icon>mdi-apps</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-bell</v-icon>
          </v-btn>
          <v-btn
                  icon
                  large
          >
            <v-avatar
                    size="32px"
                    item
            >
            <v-icon>
              mdi-account
            </v-icon>

            </v-avatar>
          </v-btn>
          <v-btn
                  icon
                  large
                  @click="logout"
          >
            <v-avatar
                    size="32px"
                    item
            >
            <v-icon>
              mdi-logout-variant
            </v-icon>
            </v-avatar>
          </v-btn>
        </v-app-bar>


<!--      主要的区域-->
      <v-main>
          <v-container
                  class="fill-height"
                  fluid
          >
            <v-row
                    align="center"
                    justify="center"
            >

              <router-view></router-view>
            </v-row>
          </v-container>
      </v-main>

      </v-app>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data: () => ({
    dialog: false,
    drawer: null,
    menu:[]
  }),
  created(){
    this.getMenuData()
  },




  methods:{
  //获取菜单数据
    async getMenuData(){
      let {data: res} = await this.$http.get('/menus')
      if (res.meta.status != 200) return Message.error(res.meta.msg)
      this.menu = res.data
      console.log(res)
    },






    //用户退出登录
    logout() {
      window.sessionStorage.clear()
      // this.$store.commit('clearAllTagLabel')
      this.$router.push('/login')
    },
  }


}
</script>

<style scoped>
  .v-list-item__action{
    margin-right: 20px;
  }


</style>
